<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/sasspublic.css">
    <link rel="stylesheet" href="./css/public.css">
    <style>
        #main{
            text-align: center;
            position: relative;
        }
        #main .carousel{
            width: 100%;
            position: relative;
            overflow: hidden;
        }
        #main .carousel .imgbox{
            width: 100%;
            height: 500px;
        }
        #main .carousel .imgbox a{
            width: 100%;
            height: 500px;
            position: absolute;
            left: 100%;
            top: 0;
        }
        #main .carousel .imgbox a:nth-child(1){
            left:0;
        }
        .carousel img{
            width: 100%;
            height: 500px;
        }
        .carousel .btns div{
            width: 50px;
            height: 80px;
            position: absolute;
            top:225px;
            border: none;
            background: rgba(200,200,200,0.5);
        }
        .carousel #bleft{
            left:100px;
            background: url(./static/xuebitu.png) -316px -137px;
        }
        .carousel #bright{
            right: 100px;
            background: url(./static/xuebitu.png) -365px -137px no-repeat;
        }
        .carousel .list{height: 30px;position: absolute;left:48%;bottom: 0;display: flex;}
        .carousel .list span{height: 20px;width: 20px;border-radius: 50%;border: black solid 1px;background: rgba(200,200,200,0.5);}
        .carousel .list span.active{background: red;color: #fff;}
        .sb-list{
            width: 100%;
            height: 50px;
            font-size: 20px;
            line-height: 50px;
        }
        .sb-list span{
            display: inline-block;
            width: 20%;
            position: relative;
        }
        .sb-list i{
            display: inline-block;
            height: 32px;
            width: 32px;
            position: absolute;
            top: 8px;
            left: 53px;
        }
        .xb1{
            background: url(./static/xuebitu.png) 2px 2px;
        }
        .xb2{
            background: url(./static/xub2.png);
        }
        .xb3{
            background: url(./static/xub1.png);
        }
        .sb-list .xb4{
            height: 32px;
            width: 30px;
            background: url(./static/xuebitu.png) -60px 2px;
        }
        .sort{
            background: none;
            margin-top: 20px;
        }
        .sort .tr .left{
            text-align: left;
        }
        .sort .tr .right{
            text-align: right;
        }
        .sort .tr .xb5{
            height: 24px;
            width:  24px;
            top: 13px;
            left:-32px;
            background: url(./static/xuebitu.png) -96px -30px;
        }
        .sort .tr .xb6{
            height: 24px;
            width:  24px;
            top: 13px;
            left:274px;
            background: url(./static/xuebitu.png) -192px -30px;
            
        }
        .sort .list{
            position: relative;
            margin-left: 100px;
        }
        .sort .list .left{
            float: left;
        }
        .sort .list .left div{
            width: 305px;
            height: 170px;
            background-position: 50%;
            background-size: contain;
            margin: 0 auto;
        }
        .sort .list .left span{
            display: inline-block;
            background-color: rgba(255,255,255,0.5);
            color: rgba(50,50,50);
            margin-top: 70px;
            width: 200px;
            padding-top: 20px;
            height: 30px;
        }
        .sort .list .left1{
            background: url(http://pic1.ymatou.com/G02/M0B/EC/41/CgvUA1lk31GAIpF4AABP6TDC4vk178_247_239_o.gif) no-repeat;
        }
        .sort .list .left2{
            background: url(http://pic1.ymatou.com/G02/M0B/F3/19/CgvUBVlk3wuAHOWBAABGRlG4Cd4962_247_239_o.gif) no-repeat;
        }
        .sort .list .left3{
            background: url(http://pic1.ymatou.com/G02/M02/F3/2D/CgvUBVlk4Q2AbxSiAADt632ES9M636_461_486_o.gif) no-repeat;
        }
        .sort .list .right{
            float: left;
        }
        .sort .list .right div{
            height: 160px;
        }
        .sort .list .right .sort1,.sort .list .right .sort2,.sort .list .right .sort3{
            position: relative;
        }
        .sort .list .right .bao{
            background: url(./static/fengexian.png) no-repeat;
            margin-top: 10px;
            height: 5px;
        }
        .sort .list .right .bao h7{
            display: inline-block;
            top: -8px;
            left: 285px;
            position: absolute;
        }
        .sort .list .right .baolist a{
            display: inline-block;
            width: 120px;
            height: 140px;
        }
        .sort .list .right .baolist a img{
            width: 120px;
            height: 120px;
        }
        .sort .list .right span:hover{
            color: rgb(204,51,51);
        }
        .lovely{
            margin-top: 20px;
        }
        .lovely .lovelytr{
            font-size: 20px;
            font-weight: bold;
            text-align: left;
            padding-left: 100px;
            position: relative;
        }
        .lovely .lovelytr span{
            position: absolute;
            height: 24px;
            width:  24px;
            left:60px;
            background: url(./static/xuebitu.png) -167px -30px
        }
        .lovely .cont{width:1000px;overflow: hidden;margin: 30px auto;border: solid 1px black;}
        .lovely .cont .goods{width: 250px;float: left;border: solid 1px black;box-sizing: border-box;text-align: center;padding: 10px;}
        .lovely .goods a div{width: 182.39px; height: 182.39px;}
        .lovely .goods img{width: 80%;}
        .lovely .goods span{display: block;margin: 10px 0; color: red;font-weight: bold;}
        .lovely .goods p{margin: 0;height: 40px;line-height: 20px;overflow: hidden;}
        .lovely .goods input{display: block;padding: 20px;margin: 0 auto;font-size: 20px;}
    </style>
</head>
<body>
    <div id="header">
        <div id="nav">
            <div id="left">
                <a href="./index.html">Hi,欢迎来到ht的洋码头！</a>
                <a href="">我是买手</a>
            </div>
            <div id="loginbar">
                <ul>
                    <li><a href="./pages/login.html">登录</a></li>
                    <li><a href="./pages/logon.html">注册</a></li>
                    <li><a class="cart">购物车</a></li>
                    <li><a href="">我的订单</a></li>
                    <li><a href="">个人中心</a></li>
                    <li><a href="">规则&公告</a></li>
                </ul>
            </div>
        </div>
        <div id="content">
            <div id="logo"><a href="./index.html"></a></div>
            <form id="search">
                <input type="text" placeholder="搜索你想要的商品">
                <div id="searchbtn"></div>
            </form>
            <div id="QR">
                <img id="qrimg" src="./static/QR.png" alt="">
            </div>
        </div>
        <div class="nav clearfix">
            <ul>
                <li>首页</li>
                <li>今日限时抢</li>
                <li>洋货集</li>
                <li class="tab">分类 <span></span></li>
            </ul>
        </div>
        <!-- 二级导航 关联上面的 "分类"-->
        <div class="secondBar">
            <ul>
                <li class="nav1">分类 <span></span></li>
                <li class="sbar clearfix">
                </li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div class="carousel">
            <div class="imgbox">
                <a><img src="./static/benner1.png" alt=""></a>
                <a><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4168531630,4145939679&fm=26&gp=0.jpg" alt=""></a>
                <a><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4115320895,308219916&fm=26&gp=0.jpg" alt=""></a>
                <a><img src="http://pic.616pic.com/bg_w1180/00/15/30/yQNuh6fhGg.jpg" alt=""></a>
            </div>
            <div class="btns">
                <div id="bleft"></div>
                <div id="bright"></div>
            </div>
            <div class="list">
            </div>
        </div>
        <div class="sb-list">
            <span><i class="xb1"></i>海外正品</span>
            <span><i class="xb2"></i>严格监管</span>
            <span><i class="xb3"></i>买手认证</span>
            <span><i class="xb4"></i>售后无忧</span>
        </div>
        <div class="sort ">
            <div class="tr sb-list">
                <span class="left"><i class="xb5"></i>分类</span><span></span><span></span>
                <span class="right">更多<i class="xb6"></i></span>
            </div>
            <div class="list clearfix">
                <div class="left">
                    <div class="left1"><span>大牌包包</span></div>
                    <div class="left2"><span>潮流服鞋</span></div>
                    <div class="left3"><span>美颜护肤</span></div>
                </div>
                <div class="right">
                    <div class="sort1">
                        <div class="bao"><h7>包 治 百 病</h7></div>
                        <div class="baolist">
                            <a href="//www.ymatou.com/products/fc_1_20/Tote包"><img src="http://pc1.img.ymatou.com/G02/M03/F3/B5/CgvUBVeawm2AaKxPAACQxTbTvJQ385_o.png" alt=""><span>Tote包</span></a>
                            <a href="//www.ymatou.com/products/fc_1_20/Tote包"><img src="http://pic1.ymatou.com/G02/M02/86/E9/CgvUBVhXUzmAShFhAAB7t5emqGs794_1_1_o.png" alt=""><span>邮差包</span></a>
                            <a href="//www.ymatou.com/products/fc_1_20/Tote包"><img src="http://pic1.ymatou.com/G02/M08/4B/04/CgvUA1h90A2AdmmIAABPN7rTRKI428_1_1_o.png" alt=""><span>手提包</span></a>
                            <a href="//www.ymatou.com/products/fc_1_20/Tote包"><img src="http://pc1.img.ymatou.com/G02/M07/F3/C4/CgvUBVeaw-mAGuwgAACfFeQK_oY352_o.png" alt=""><span>Mini包</span></a>
                            <a href="//www.ymatou.com/products/fc_1_20/Tote包"><img src="http://pic1.ymatou.com/G02/M08/77/0D/CgvUBFiFpuGAee6dAADY3GpjezQ591_1_1_o.jpg" alt=""><span>钱包卡包</span></a>
                        </div>
                    </div>
                    <div class="sort2">
                        <div class="bao"><h7>美鞋不嫌多</h7></div>
                        <div class="baolist">
                            <a href="//www.ymatou.com/products/fc_1_39/高跟鞋"><img src="http://pic1.ymatou.com/G02/M04/59/9E/CgvUA1iAaF-AZfTuAABX2z6VeJM922_1_1_o.png" alt=""><span>高跟鞋</span></a>
                            <a href="//www.ymatou.com/products/fc_1_39/高跟鞋"><img src="http://pic1.ymatou.com/G02/M08/59/9E/CgvUA1iAaFaASHFOAAA3qpolVbo674_1_1_o.png" alt=""><span>小白鞋</span></a>
                            <a href="//www.ymatou.com/products/fc_1_39/高跟鞋"><img src="http://pic1.ymatou.com/G02/M06/5F/89/CgvUBViAaG6AHbstAABMR50JmyM627_1_1_o.png" alt=""><span>明星同款</span></a>
                            <a href="//www.ymatou.com/products/fc_1_39/高跟鞋"><img src="http://pic1.ymatou.com/G02/M06/5F/89/CgvUBViAaGCAZ1b2AABs2e8dXlM271_1_1_o.png" alt=""><span>雪地靴</span></a>
                            <a href="//www.ymatou.com/products/fc_1_39/高跟鞋"><img src="http://pic1.ymatou.com/G02/M08/59/9E/CgvUA1iAaGmAfecjAAAxDvhbPA4497_1_1_o.png" alt=""><span>过膝靴</span></a>
                            
                        </div>
                    </div>
                    <div class="sort3">
                        <div class="bao"><h7>护肤要积极</h7></div>
                        <div class="baolist">
                            <a href="//www.ymatou.com/products/fc_1_50/卸妆洁面"><img src="http://pc1.img.ymatou.com/G02/M0B/F4/7F/CgvUA1eax9OAcCuIAABSaVvPeEk096_o.png" alt=""><span>卸妆洁面</span></a>
                            <a href="//www.ymatou.com/products/fc_1_50/卸妆洁面"><img src="http://pc1.img.ymatou.com/G02/M0B/F3/F2/CgvUBVeax9aADhdsAAAwg2mcJq0504_o.png" alt=""><span>化妆水</span></a>
                            <a href="//www.ymatou.com/products/fc_1_50/卸妆洁面"><img src="http://pc1.img.ymatou.com/G02/M0B/F3/AE/CgvUBFeax9iAIdSuAABbM6frl-A470_o.png" alt=""><span>精华液</span></a>
                            <a href="//www.ymatou.com/products/fc_1_50/卸妆洁面"><img src="http://pc1.img.ymatou.com/G02/M0B/F3/B0/CgvUBFeayACAKRmAAACGLeknXsQ143_o.png" alt=""><span>乳液</span></a>
                            <a href="//www.ymatou.com/products/fc_1_50/卸妆洁面"><img src="http://pc1.img.ymatou.com/G02/M0B/F3/F5/CgvUBVeayAKASxtUAACaqlRGrsM967_o.png" alt=""><span>面膜</span></a>
                       </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lovely">
            <div class="lovelytr"><span></span>猜你喜欢</div>
            <div class="cont"></div>
        </div>
    </div>
    <div id="last">
        <div id="details">
            <img src="./static/details.png" alt="">
        </div>
        <div id="more">
            <div id="total">
                <ul>
                    <li>购物指南</li>
                    <li>订单服务</li>
                    <li>支付与配送</li>
                    <li>售后服务</li>
                    <li>官方微信</li>
                </ul>
            </div>
            <div id="tomore">
                <ul>
                    <li>注册与登录</li>
                    <li>账户信息维护</li>
                    <li>购物流程</li>
                    <li>会员体系</li>
                    <li>常见问题</li>
                </ul>
                <ul>
                    <li>订单状态说明</li>
                    <li>自动取消顶大</li>
                    <li>上传身份证</li>
                    <li>&nbsp; </li>
                    <li>&nbsp; </li>
                </ul>
                <ul>
                    <li>支付方式</li>
                    <li>优惠劵和红包</li>
                    <li>如何提现</li>
                    <li>配送方式</li>
                    <li>&nbsp; </li>
                </ul>
                <ul>
                    <li>消费维权</li>
                    <li>纠纷处理规则</li>
                    <li>退货规则</li>
                    <li>&nbsp; </li>
                    <li>&nbsp; </li>
                </ul>
                <div>
                    <img id="qrvx" src="./static/QRvx.png" alt="">
                </div>
            </div>
        </div>
        <div id="about">
            <p>关于码头</p><span>|</span>
            <p>码头招聘</p><span>|</span>
            <p>网站地图</p><span>|</span>
            <p>所有帮助</p><span>|</span>
            <p>海外招商中心</p><span>|</span>
            <p>扫货买手规则</p><span>|</span>
            <p>卖家常见问题</p>
        </div>
        <div id="link">
            <p>55bbs我爱购物网</p><span>|</span><p>篱笆网</p><span>|</span><p>闺蜜网</p><span>|</span>
            <p>名品导购网</p><span>|</span><p>瑞丽女性网</p><span>|</span><p>起点中文网</p><span>|</span>
            <p>酷6网</p><span>|</span><p>太平洋返利网</p><span>|</span><p>海外折扣拼团网</p><span>|</span>
            <p>韩都衣舍</p><span>|</span><p>嘉年乐</p><span>|</span><p>为为网购商城</p><span>|</span><br>
            <p>同城购物网</p><span>|</span><p>齐家网</p><span>|</span><p>网上商城</p><span>|</span>
            <p>礼品公司</p><span>|</span><p>留学服务中心</p><span>|</span>
            <p>礼派</p><span>|</span><p>快易拍</p><span>|</span>
            <p>手表</p><span>|</span><p>卡当创意礼物</p><span>|</span><p>户外装备</p><span>|</span>
            <p>母婴展</p><span>|</span><p>微财富理财</p><span>|</span><p>更多>></p>
        </div>
        <div id="auth">
            <div id="imgbox"></div>
            <div>
                <span>© 2009－2019 ymatou.com, All rights reserved 增值电信业务经营许可证：沪B2-20140021</span><br>
                <p>上海洋码头网络技术有限公司  版权所有 备案号（ 沪ICP备11050082号 ）</p><br>
                <span>上海市静安区江场三路93号13层</span>
            </div>
            <div id="footer">
                <div id="business"></div>
                <div id="footerf">
                    <p>沪公网安备 31010802001410号</p><span>|</span> 
                    <span>违法不良信息举报电话：021-80185223</span><span>|</span>
                    <p>上海市互联网上海市互联网举报中心</p><br><br>
                </div>
            </div>
        </div>
    </div>
    <div id="sidebar">
        <ul>
            <li><div id="personal"></div></li>
            <li class="cart"><div id="mycart"></div><span><p>购物车</p> </span></li>
            <li class="sqr" style="height:60px"><div id="qrsmall"></div></li>
            <li><div id="top"></div><a href="#header">&nbsp;&nbsp;TOP</a></li>
        </ul>
    </div>
    <div id="ycqr">
        <div id="xfqr"><img src="./static/QRvx.png" alt=""></div>
    </div>

</body>
<script src="./js/ajax-promise.js"></script>
<script src="./js/public.js"></script>
<script src="./js/move.2.0.js"></script>
<script>
    // 楼层上的二维码
    class QR{
        constructor(){
            this.sqr=document.querySelector(".sqr");
            this.ycqr=document.querySelector("#ycqr");
            this.addEvent();            
        }
        addEvent(){
            var that=this;
            this.sqr.onmousemove=function(){
                that.ycqr.style.display = "block";
            }
            this.sqr.onmouseout=function(){
                that.ycqr.style.display = "none";
            }
            this.ycqr.onmousemove=function(){
                that.ycqr.style.display = "block";
            }
            this.ycqr.onmouseout=function(){
                that.ycqr.style.display = "none";
            }
        }
    }
    new QR;
    // 轮播图
    class Banner{
        constructor(){
            this.left = document.getElementById("bleft");
            this.right = document.getElementById("bright");
            this.child = document.querySelectorAll(".imgbox a");
            this.list = document.querySelector(".list");
            this.box = document.querySelector(".carousel");
            this.iNow = 0;
            this.iPrev = this.child.length - 1;
            this.init();
            this.createList();
            this.autoPlay();
        }
        init(){
            var that = this;
            this.left.addEventListener("click",function(){
                that.changeIndex(1);
            })
            this.right.addEventListener("click",function(){
                that.changeIndex(-1);
            })
            this.list.onclick = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.tagName == "SPAN"){
                    that.listChangeIndex(tar);
                }
            }
        }
        changeIndex(direct){
            if(direct == 1){
                if(this.iNow == 0){
                    this.iNow = this.child.length-1;
                    this.iPrev = 0;
                }else{
                    this.iNow--;
                    this.iPrev = this.iNow + 1;
                }
            }else{
                if(this.iNow == this.child.length-1){
                    this.iNow = 0;
                    this.iPrev = this.child.length-1;
                }else{
                    this.iNow++;
                    this.iPrev = this.iNow - 1;
                }
            }
            this.move(direct);
        }
        move(direct){
            this.child[this.iPrev].style.left = 0;
            move(this.child[this.iPrev],{left:this.child[0].offsetWidth * direct});
            this.child[this.iNow].style.left = -this.child[0].offsetWidth * direct + "px";
            move(this.child[this.iNow],{left:0});
            this.setActive();
        }
        createList(){
            var str = ``;
            for(var i=0;i<this.child.length;i++){
                str += `<span index='${i}'>${i+1}</span>`;
            }
            this.list.innerHTML = str;
            this.setActive();
        }
        setActive(){
            for(var i=0;i<this.list.children.length;i++){
                this.list.children[i].className = "";
            }
            this.list.children[this.iNow].className = "active";
        }
        listChangeIndex(tar){
            var index = parseInt(tar.getAttribute("index"));
            if(index > this.iNow){
                this.listMove(1,index);
            }
            if(index < this.iNow){
                this.listMove(-1,index);
            }
            this.iNow = index;
            this.setActive();
        }
        listMove(direct,index){
            this.child[this.iNow].style.left = 0;
            move(this.child[this.iNow],{left:-1349 * direct})
            this.child[index].style.left = 1349 * direct + "px";
            move(this.child[index],{left:0});
        }
        autoPlay(){
            var t = setInterval(()=>{
                this.changeIndex(-1);
            },3000)

            this.box.onmouseover = function(){
                clearInterval(t);
            }
            var that = this;
            this.box.onmouseout = function(){
                t = setInterval(()=>{
                    that.changeIndex(-1);
                },5000)
            }
        }
    }
    // 运行轮播图
    new Banner();
    class List{
        constructor(){
            this.url="http://localhost/ht/yangmatou/src/json/goods.json"
            this.cont=document.querySelector(".cont");
            this.load();
        }
        load(){
            ajax({
                url:this.url
            }).then((res)=>{
                this.res = JSON.parse(res);
                this.display();
            })
        }
        display(){
            let str = "";
            for(var i=0;i<20;i++){
                str += `<div class="goods" index="${this.res[i].goodsId}">
                            <a href="./pages/detal.html?id=${this.res[i].goodsId}">
                                <div><img src="${this.res[i].img.largeImg[0]}" alt=""></div>
                                <p>${this.res[i].name}</p>
                                <span>${this.res[i].price}</span>
                            </a>
                        </div>`
            }
            this.cont.innerHTML = str;
        }
    }
    // 渲染商品
    new List();
    // 选项卡
    class Tab{
        constructor(){
            this.tab=document.querySelector(".tab");
            this.secondBar=document.querySelector(".secondBar");
            this.nav1=document.querySelector(".nav1");
            this.sbar=document.querySelector(".sbar");
            this.url="http://localhost/ht/yangmatou/src/json/tab.json"
            this.load();
            this.sbar1=document.querySelector(".sbar1");
            this.addEvent();
        }
        addEvent(){
            var that=this;
            that.sbar.onclick=function(){
                location.href="./pages/goodsList.html";
            }
            this.tab.onmouseover=function(){
                that.secondBar.style.display = "block";
            }
            that.tab.onmouseout=function(eve){
                that.secondBar.style.display = "none";
            }
            this.nav1.onmouseover=function(){
                that.secondBar.style.display = "block";
            }
            that.nav1.onmouseout=function(eve){
                that.secondBar.style.display = "none";
            }
            this.sbar.onmouseover=function(){
                that.secondBar.style.display = "block";
            }
            that.sbar.onmouseout=function(eve){
                that.secondBar.style.display = "none";
            }
        }
        load(){
            ajax({
                url:this.url
            }).then((res)=>{
                this.res = JSON.parse(res);
                this.display();
            })
        }
        display(){
            for(var i=0;i<14;i++){
                this.sbar.innerHTML+=`<div class="sbar1">
                        <div class="left"><p>${this.res[i].sorc}<span></span></p><i>${this.res[i].sorcs}</i></div>
                        <div class="right"><img src="${this.res[i].img}" alt=""></div>
                    </div>`;
            }
            this.sbar.innerHTML+=`<div id="sbarlast">
                        <div class="left"><p>更多<span></span></p><i>More</i></div>
                    </div>`;
        }
    }
    // 运行选项卡
    new Tab;
    // 验证是否进入购物车
    new IfLogin({
        url1:"./pages/myCart.html",
        url2:"./pages/login.html",
        add:document.querySelectorAll(".cart")
    });
</script>
</html>